import { onMounted, ref, watch } from "vue";
import { getTopCategoryAPI } from "@/api/category";
import { useRoute } from "vue-router";
import { onBeforeRouteUpdate } from "vue-router";

export const useCategory = () => {
  const categoryData = ref({});
  const route = useRoute();
  const getToCategory = async (id = route.params.id) => {
    const res = await getTopCategoryAPI(id);
    //console.log(res);

    categoryData.value = res.result;
  };
  onMounted(() => {
    getToCategory();
  });

  // // 监听路由参数的变化，当路由参数发生变化时，重新获取数据
  // watch(() => route.params.id, (newValue, oldValue) => {
  //   /*
  //   watch(() => route.params.id, (newValue, oldValue) => {...})：
  //   () => route.params.id 是 watch 观察的对象。这个函数返回 route.params.id 的值，
  //   当 route.params.id 发生变化时，watch 会调用回调函数。
  //   (newValue, oldValue) => {...} 是回调函数，当观察的数据发生变化时会被调用。
  //   newValue 表示 route.params.id 的新值。
  //   oldValue 表示 route.params.id 的旧值。*/
  //   getToCategory()
  // })

  // 路由监听
  onBeforeRouteUpdate((to) => {
    getToCategory(to.params.id);
  });
  return { categoryData };
};
